|
1
|
|
|
import dasherize from 'dasherize'; |
|
2
|
|
|
import { |
|
3
|
|
|
__, |
|
4
|
|
|
contains, |
|
5
|
|
|
equals, |
|
6
|
|
|
ifElse, |
|
7
|
|
|
join, |
|
8
|
|
|
map, |
|
9
|
|
|
toPairs, |
|
10
|
|
|
type, |
|
11
|
|
|
unary, |
|
12
|
|
|
when |
|
13
|
|
|
} from 'ramda'; |
|
14
|
|
|
import { transform } from 'babel-core'; |
|
15
|
|
|
|
|
16
|
|
|
/** |
|
17
|
|
|
* Generates CSS string from an object |
|
18
|
|
|
* |
|
19
|
|
|
* @param {Object} obj |
|
20
|
|
|
* @return {String} |
|
21
|
|
|
*/ |
|
22
|
|
|
const compileCSS = toPairs |
|
23
|
|
|
& map(([key, value]) => `${dasherize(key)}:${value}`) |
|
24
|
|
|
& join(';') |
|
25
|
|
|
& JSON.stringify; |
|
26
|
|
|
|
|
27
|
|
|
/** |
|
28
|
|
|
* Generates HTML string for element properties |
|
29
|
|
|
* |
|
30
|
|
|
* @param {Object} props |
|
31
|
|
|
* @return {String} |
|
32
|
|
|
*/ |
|
33
|
|
|
function compileProps(props) { |
|
34
|
|
|
const transformKey = when(equals('className'), ~'class'); |
|
35
|
|
|
const transformValue = ifElse(type & equals('Object'), |
|
36
|
|
|
compileCSS, unary(JSON.stringify)); |
|
37
|
|
|
|
|
38
|
|
|
const result = props |
|
39
|
|
|
| toPairs |
|
40
|
|
|
| map(([key, value]) => `${transformKey(key)}=${transformValue(value)}`) |
|
41
|
|
|
| join(' '); |
|
42
|
|
|
|
|
43
|
|
|
return result.length === 0 ? '' : ` ${result}`; |
|
44
|
|
|
} |
|
45
|
|
|
|
|
46
|
|
|
/** |
|
47
|
|
|
* Compiles a self-closing tag, dealing with elements that may or not be |
|
48
|
|
|
* self-closing |
|
49
|
|
|
* |
|
50
|
|
|
* @param {String} tag - JSX component name |
|
51
|
|
|
* @param {Object} props - Element properties |
|
52
|
|
|
*/ |
|
53
|
|
|
function compileSelfClosingTag(tag, props) { |
|
54
|
|
|
const compiledProps = compileProps(props); |
|
55
|
|
|
|
|
56
|
|
|
return contains(tag, ['br', 'hr', 'img']) |
|
57
|
|
|
? `<${tag}${compiledProps} />` |
|
58
|
|
|
: `<${tag}${compiledProps}></${tag}>`; |
|
59
|
|
|
} |
|
60
|
|
|
|
|
61
|
|
|
/** |
|
62
|
|
|
* Generates HTML source code directly from JSX |
|
63
|
|
|
* |
|
64
|
|
|
* @param {String} tag - JSX component name |
|
65
|
|
|
* @param {Object} props - Element properties |
|
66
|
|
|
* @param {Array} children - Items to append to inner component |
|
67
|
|
|
* @return {String} |
|
68
|
|
|
*/ |
|
69
|
|
|
export function compileHTML(tag, props, ...children) { |
|
70
|
|
|
const filteredTag = tag | when(contains(__, ['style', 'script']), ~'span'); |
|
71
|
|
|
const render = when(type & equals('Array'), join('')); |
|
72
|
|
|
return children.length === 0 |
|
73
|
|
|
? compileSelfClosingTag(filteredTag, props) |
|
74
|
|
|
: `<${filteredTag}${compileProps(props)}>${children.map(render).join('')}</${filteredTag}>`; |
|
75
|
|
|
} |
|
76
|
|
|
|
|
77
|
|
|
/** |
|
78
|
|
|
* Precompiles ES6 source to ES5 in order to keep retrocompatibily |
|
79
|
|
|
* |
|
80
|
|
|
* @author Marcelo Haskell Camargo |
|
81
|
|
|
* @param {String} source |
|
82
|
|
|
* @param {String} property - code, map or ast |
|
|
|
|
|
|
83
|
|
|
* @return {Promise} |
|
84
|
|
|
*/ |
|
85
|
|
|
export function compileES6(source) { |
|
86
|
|
|
const result = transform(source, { |
|
87
|
|
|
comments: false, |
|
88
|
|
|
compact: true, |
|
89
|
|
|
presets: ['es2015', 'react'], |
|
90
|
|
|
plugins: [ |
|
91
|
|
|
['transform-react-jsx', { pragma: '__render__' }] |
|
92
|
|
|
] |
|
93
|
|
|
}); |
|
94
|
|
|
|
|
95
|
|
|
return result.code; |
|
96
|
|
|
} |
|
97
|
|
|
|